<template>
  <div>
    <el-table
      border
      :data="
        tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#f5f6fa' }"
    >
      <el-table-column prop="username" label="用户昵称"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="cardName" label="年卡名称"> </el-table-column>
      <el-table-column prop="cardType" label="年卡类型">
        <template slot-scope="scope">
          {{ scope.row.cardType == 1 ? "标准卡" : "儿童/老年卡" }}
        </template>
      </el-table-column>
      <el-table-column prop="cardNum" label="年卡数量">
        <template slot-scope="scope"> {{ scope.row.cardNum }} 张 </template>
      </el-table-column>
      <el-table-column prop="cardPrice" label="年卡价格">
        <template slot-scope="scope"> {{ scope.row.cardPrice }} 元 </template>
      </el-table-column>
      <el-table-column prop="cardStartDate" label="年卡开始日期">
        <template slot-scope="scope">
          {{
            scope.row.cardStartDate.substr(
              0,
              scope.row.cardStartDate.lastIndexOf("T")
            )
          }}
        </template>
      </el-table-column>
      <el-table-column prop="cardEndDate" label="年卡结束日期">
        <template slot-scope="scope">
          {{
            scope.row.cardEndDate.substr(
              0,
              scope.row.cardEndDate.lastIndexOf("T")
            )
          }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间">
        <template slot-scope="scope">
          {{
            scope.row.createTime
              .substr(0, scope.row.createTime.lastIndexOf("."))
              .replace("T", " ")
          }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :total="total"
      :page-size="pagesize"
      hide-on-single-page
      @current-change="handleChange"
      style="margin-top: 15px; text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pagesize: 10,
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios.post(`${this.$server}/manageSystemCardOrder`).then((response) => {
        if (response.data.code == 200) {
          this.tableData = response.data.data.reverse();
          this.total = response.data.data.length;
          console.log(response.data);
        } else {
          this.$message.error(response.data.msg);
        }
      });
    },
    handleChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style scoped lang="scss">
</style>
